<template>
    <div ref="safeChart" style="width: 400px;height: 160px;">

    </div>
</template>

<script>
    export default {
      name: 'safeMonitor',
      data () {
        return {
          mapList: []
        }
      },
      mounted () {
        this.makeMapList()
        this.init()
      },
      watch: {
        riskDtos () {
          this.concatMaplist()
        }
      },
      props: {
        riskDtos: {
          default: [],
          type: Array
        }
      },
      methods: {
        init () {
          let myChart = this.$echarts.init(this.$refs.safeChart)
          let option = {
            title: {
              text: '近7天安全问题变化趋势',
              textStyle: {
                color: '#A9C5EC',
                fontSize: '12px',
                align: 'left'
              }
            },
            tooltip: {
              trigger: 'axis',
              backgroundColor: 'rgba(9, 37, 56, 0.5)',
              extraCssText: 'box-shadow: 0 0 5px 2px rgba(8, 69, 69) inset;'
            },
            legend: {
              align: 'left',
              right: 0,
              itemWidth: 18,
              itemHeight: 5,
              data: ['高风险', '低风险'],
              textStyle: {
                color: '#a8c5ed'
              }
            },
            grid: {
              top: 35,
              left: 0,
              right: 20,
              bottom: 0,
              containLabel: true
            },
            xAxis: {
              type: 'category',
              boundaryGap: false,
              visualMap: {
                padding: [0, 10, 0, 0]       // 上右下左
              },
              data: this.mapList.map((item) => {
                return item.reportDate
              }),
              axisLabel: {
                color: '#a8c5ed'
              },
              axisLine: {
                show: true,
                lineStyle: {
                  color: '#214a60',
                  width: 2
                }
              },
              axisTick: {
                show: false
              },
              splitLine: {
                show: false,
                lineStyle: {
                  color: '#a8c5ed'
                }
              }
            },
            yAxis: [
              {
                show: false,
                type: 'value',
                axisLabel: {
                  color: '#a8c5ed'
                },
                axisLine: {
                  show: true,
                  lineStyle: {
                    color: '#214a60',
                    width: 2
                  }
                },
                axisTick: {
                  show: false
                },
                splitLine: {
                  show: false,
                  lineStyle: {
                    color: '#a8c5ed'
                  }
                }
              }
            ],
            series: [
              {
                name: '高风险',
                type: 'line',
                symbol: 'circle',
                symbolSize: 5,
                itemStyle: {
                  color: 'rgba(231,76,78,1)'
                },
                areaStyle: {
                  normal: {
                    color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                      offset: 0,
                      color: 'rgba(231,76,78,0.5)'
                    }, {
                      offset: 1,
                      color: 'rgba(231,76,78,0)'
                    }])
                  }
                },
                data: this.mapList.map((item) => {
                  return item.highRisk
                }),
                label: {
                  show: true,
                  color: '#f2f2f2'
                }
              },
              {
                name: '低风险',
                type: 'line',
                symbol: 'circle',
                symbolSize: 5,
                itemStyle: {
                  color: 'rgba(255,160,55,1)'
                },
                areaStyle: {
                  normal: {
                    color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                      offset: 0,
                      color: 'rgba(255,160,55,0.5)'
                    }, {
                      offset: 1,
                      color: 'rgba(255,160,55,0)'
                    }])
                  }
                },
                data: this.mapList.map((item) => {
                  return item.lowRisk
                }),
                label: {
                  show: true,
                  color: '#f2f2f2'
                }
              }
            ]
          }
          myChart.setOption(option)
        },
        makeMapList () {
          for (let i = 7; i > 0; i--) {
            let date = new Date()
            date.setDate(date.getDate() - i)
            let _date = this.$moment(date).format('MM-DD')
            this.mapList.push({
              highRisk: 0,
              lowRisk: 0,
              reportDate: _date
            })
          }
        },
        concatMaplist () {
          this.riskDtos.forEach((item) => {
            this.mapList.forEach((item2) => {
              if (item.reportDate === item2.reportDate) {
                item2.lowRisk = item.lowRisk
                item2.highRisk = item.highRisk
              }
            })
            this.init()
          })
        }
      }
    }
</script>

<style scoped>

</style>
